<template>
	<view class="content">
		<!-- tab -->
		<u-tabbar></u-tabbar>
		<view class="table">
			<view>保险公司<uni-icons type="arrowdown" size="10"></uni-icons>
			</view>
			<view>保费区间<uni-icons type="arrowdown" size="10"></uni-icons>
			</view>
			<view>投保时间<uni-icons type="arrowdown" size="10"></uni-icons>
			</view>
			<view>
				<uni-icons type="search"></uni-icons> 查询
			</view>
		</view>
		<!-- 灰色线条 -->
		<view class="test " v-for="(item,index) in 3" :key="index">
			<view class="user d-flex ">
				<view class="username">
					<text>谭延钊</text>
					<text style="color: #7f7f7f;">|</text>
					<text>13112816412</text>
				</view>
				<view style="color: #7f7f7f;">
					<image class="kefu" src="../../static/images/icon/kefu.png"></image>
					客服
				</view>
			</view>
			<text style="font-size: 24upx;color: #7f7f7f;">下单工号:AD00261</text>
			<view class="time">
				<text style="font-size: 24upx;color: #7f7f7f;">下单时间:2018-09-28 20:00:00</text>
				<text style="font-size: 24upx;color: #7f7f7f;font-weight: 600;">粤A02365</text>
			</view>




			<view class="message">
				<view class="d-flex justify-content-between">
					<text style="font-weight: 600;">中银保险</text>
					<text style="font-size: 26upx;color: #7f7f7f;">订单号:0101520182062</text>
					<text style="color: #7f7f7f;">待支付</text>
				</view>
				<view class="d-flex justify-content-between">
					<text style="font-size: 40upx;color: #e60012;">￥2650.00</text>
					<view class="d-flex btn">
						<text>取消</text>
						<text @tap="send">查看</text>
						<text>立即支付</text>
					</view>
				</view>
			</view>
			
			<view class="message">
				<view class="d-flex justify-content-between">
					<text style="font-weight: 600;">中银保险</text>
					<text style="font-size: 26upx;color: #7f7f7f;">订单号:0101520182062</text>
					<text style="color: #7f7f7f;">已失效</text>
				</view>
				<view class="d-flex justify-content-between">
					<text style="font-size: 40upx;color: #e60012;">￥2650.00</text>
					<view class="d-flex btn">
						<text>取消</text>
						<text @tap="send">查看</text>
						<text>立即支付</text>
					</view>
				</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	import tabbar from '../../components/tabbar.vue'
	import border from '../../components/border.vue'
	export default {
		components: {
			'u-tabbar': tabbar,
			'u-border': border
		},
		methods:{
			send(){
				uni.navigateTo({
					url:'../xiangqing2/xiangqing2'
				})
			},//查看详情
		}
	}
</script>

<style lang="less" scoped>

	.message {
		margin-top: 30upx;
		box-sizing: border-box;
		padding: 30upx 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 690upx;
		height: 206upx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
	}

	.btn text {
		margin-left: 20upx;
		font-size: 28upx;
		line-height: 56upx;
		color: #e60012;
		text-align: center;
	}

	.btn text:nth-child(3) {
		width: 140rpx;
		height: 56rpx;
		background-color: #e60012;
		border-radius: 4rpx;
		color: white;
	}

	.btn text:nth-child(1),
	.btn text:nth-child(2){
		width: 84upx;
		height: 56upx;
		border-radius: 4rpx;
		border: solid 1rpx #e60012;
	}



	//按钮
	.time text:nth-child(2) {
		width: 144upx;
		height: 40upx;
		border-radius: 4rpx;
		border: solid 1rpx #2a84f8;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #2a84f8 !important;
	}

	.time {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	//下单时间
	.username {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.username text:nth-child(2) {
		margin: 0 10upx;
	}

	.username text {
		font-size: 30upx;
		font-weight: 600;
		color: #333333;
	}

	.kefu {
		width: 28upx;
		height: 28upx;
		position: absolute;
		top: 5px;
		right: 33px;
	}

	.user {
		justify-content: space-between;
		position: relative;
	}

	.test {
		padding: 30upx 30upx;
		border-top: 20upx solid #f2f2f2;
		height: 613upx;
	}


	.table {
		height: 80upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #dadada;
	}

	.table>view {
		flex: 1;
		text-align: center;
		font-size: 26upx;
		color: #7f7f7f;
	}


</style>
